<template>
  <div class="menu-item">
    <!-- 无子集 -->
    <el-menu-item :index="menuitem.url" v-if="!menuitem.children">
      <i class="el-icon-menu"></i>
      <span slot="title">{{ menuitem.title }}</span>
    </el-menu-item>

    <!-- 有子集 -->
    <el-submenu :index="menuitem.url" v-else>
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ menuitem.title }}</span>
      </template>

      <navitem :menuitem="item" v-for="item of menuitem.children" :key="item.url" />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'navitem',

  props: ['menuitem'],
};
</script>

<style lang="less" scoped></style>
